<template>
  <div class="hello">
    <div class="login-header">
      <a  :class="{select:zhuangtai}" @click="ZhaungtaiClick()">已有账号登录 <span v-if="zhuangtai" ></span></a>
      <a :class="{select:!zhuangtai}" @click="ZhaungtaiClick()">手机快捷登录 <span v-if="!zhuangtai"></span></a>
    </div>

    <!--手机号登录-->
    <div class="login-number clearfix " v-if="zhuangtai" >
      <ul class="borBttom">
        <li class="float_lf" style="color: #333">
          <i >
            <img src="../assets/images/login_phone_icon@2x.png" width="100%" alt=""/>
          </i>
          账号
        </li>
        <li class="float_lf" >
          <input type="text" name="phone_number" v-model="phone_number"  placeholder="请输入手机号码"/>
        </li>
      </ul>
      <ul class="borBttom">
        <li class="float_lf" style="color: #333">
          <i class="upwds">
            <img src="../assets/images/login_password_icon@2x.png" width="100%" alt=""/>
          </i>
          密码
        </li>
        <li class="float_lf">
          <input type="password" name="pass_word" v-model="pass_word" placeholder="请输入密码"/>
        </li>
      </ul>
    </div>
    <!--快捷手机登陆-->
    <div class="login-rapid" v-if="!zhuangtai" >

        <ul class="borBttom">
          <li class="float_lf">
            <i class="upwds" >
              <img src="../assets/images/login_phone_icon@2x.png" width="100%" alt=""/>
            </i>
          </li>
          <li class="float_lf">
            <input type="text" name="phone_number_reg" v-model="phone_number"  placeholder="请输入手机号码"/>
            <button class="get_code" @click="getCode($event)" :disabled="!show">
              {{miao}}
            </button>
          </li>
        </ul>
        <ul class="borBttom">
          <li class="float_lf">
            <i class="upwds">
              <img src="../assets/images/login_captcha_icon@2x.png" width="100%" alt=""/>
            </i>

          </li>
          <li class="float_lf">
            <input type="password" name="password1" v-model=" yanzhengma" placeholder="请输入验证码"/>
          </li>
        </ul>

    </div>
      <p class="logIndex " :class="{hie:zhuangtai}" style=" padding: 0 20px;font-size: 0.87rem;color: #666666;margin-top: 15px">
          未注册的手机号将自动创建为蚂蚁女王账户,且代表您已同意《 <a style=" text-decoration: underline; color: rgb(102, 102, 102);" href="https://api.mayinvwang.com/webview/deals/">蚂蚁女王服务协议</a>》
      </p>
      <!--登录按钮-->
    <div class="btn-login" @click="login" style="    margin-top: 2.8125rem;" >
      <button >
        登录
      </button>
    </div>
    <p class="login-text">
      <router-link @click="handleClick()" to="/register" style="color:#666">注册账号</router-link>
      <i></i>
      <router-link to="/fnde" class="fontCd329">忘记密码</router-link>
    </p>


    <footer class="login-footer">

      <p>客服电话：<a href="tel:400-8787-923" class="fontCd329">400-8787-923</a></p>
    </footer>
  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      zhuangtai:true, //if true  账号登陆 else 快捷登陆
      //验证
      phone_ok:false,
        password_ok:false,
      //账号登陆
      phone_number:'',
      pass_word:'',
      //秒数
      miao:'获取验证码',
      show:true,
      yanzhengma:"",
      yanzhengmas:""
    }
  },
  methods:{
    ZhaungtaiClick(){
      if(this.zhuangtai){
        this.zhuangtai=false;
      }else{
        this.zhuangtai=true;
      }
    },
    phoneYan(){
      let phone=this.phone_number;
      console.log(phone)
      if(phone=='') {
          this.$layer.msg('账号不能为空！')
          return true;
      }else if(!(/^1[3|4|5|8|7|2][0-9]\d{8}$/.test(phone))){
          this.$layer.msg("手机号码错误");
//          this.phone_number='';
          return true;
      }else{
        this.phone_ok=true;
      }
      },
    passYan(){
        let password=this.pass_word;
        if(password==''){
            this.$layer.msg('密码不能为空！')
        }else if(password.length<6||password.length>16){
        // alert('手机号不匹配正则');
        this.$layer.msg('请输入正确的密码');
      }else{
            this.password_ok=true;
        }

    },
//      this.$layer.msg("登陆中");
login(){
    let beready = true;	//防止重复点击
    if(this.zhuangtai){
        this.passYan();
        this.phoneYan();
    }
    if(this.zhuangtai&&this.phone_ok&&this.password_ok){
          this.$http.post(
            "http://api.mayinvwang.com/index.php/AppjsonPublic/login",
            {phone:this.phone_number,password:this.pass_word}
          ).then(function (res) {
//            this.$layer.msg("成功");
            console.log(res);
            if(res.data.status=='1'){
                console.log(res.data.status);
                sessionStorage['user_id']=res.data.user_id;
                sessionStorage['phone']=this.phone_number;
                this.$store.commit('mutationName',{user_id:res.data.user_id,phone:this.phone_number})
                this.$router.push( {path:'/mian/chaxun'})
            }else{
                this.$layer.msg(res.data.msg)
            }
//            sessionStorage['user_id']=res.data.user_id;
//            sessionStorage['phone']=this.phone_number;
//            this.$store.commit('mutationName',{user_id:res.data.user_id,phone:this.phone_number})
//            this.$router.push( {path:'/chaxun'})

          },function (res) {
            console.log(res)
          })
      }else if(!this.zhuangtai && this.phone_ok){
        if(this.yanzhengma!=this.yanzhengmas){

          return this.$layer.msg("验证码有误");
        }
        this.$http.post('http://api.mayinvwang.com/index.php/AppjsonPublic/verifyLogin',
          {phone:this.phone_number,verify:this.yanzhengma}
        ).then(
          (res)=>{
            console.log(res)
            sessionStorage['user_id']=res.data.user_id;
            sessionStorage['phone']=this.phone_number;
            this.$store.commit('mutationName',{user_id:res.data.user_id,phone:this.phone_number})
            this.$router.push( {path:'/mian/chaxun'})
          },
          (res)=>{}
        )
      }
    }
    ,getCode(e){
          let phone=this.phone_number;
          console.log(phone)
          if(phone=='') {
              this.$layer.msg('手机号不能为空！')
              return true;
          }else if(!(/^1[3|4|5|8|7|2][0-9]\d{8}$/.test(phone))){
              this.$layer.msg("手机号码错误");
//          this.phone_number='';
              return true;
          }else{
              this.phone_ok=true;
          }

      if(!this.phone_ok)return
      this.show=false;
       var beclick=true;
      if(!beclick) return;
       beclick = false;
      this.$http.post("http://api.mayinvwang.com/index.php/AppjsonPublic/verify",
      {phone:this.phone_number}
      ).then(
         (res)=>{
           console.log(res.data.verify);
           this.yanzhengmas=res.data.verify;
           var a=60;
           var timer1=setInterval(()=>{
             a--;
             this.miao=a+"重新获取";
             if(a < 0){
               clearInterval(timer1);
               this.show=true;
               beclick = true;
               this.miao="获取验证码";
             }
           },1000);
         },
         (res)=>{}
       )
    },
    GetQueryString(name) {
            var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if(r!=null)return  unescape(r[2]); return null;
          },
    handleClick() {
//      this.$store.commit('tokenName','1234567')
    },
      //防止token重复
      tokensss(name){
        let a = this.GetQueryString(name);
        if(a.indexOf('t')!=-1){
            let indexs=a.indexOf('t');
            return a.substr(0,indexs);
        }else{
            return a;
        }

      }
  },
  computed:{

  },
    beforeCreate(){

   },
  created:function(){
      console.log(this.$route.params.id)
      if(this.$route.params.id==2){
          this.zhuangtai=false;
      }
   console.log( this.tokensss('token'))
    sessionStorage['token']=this.tokensss('token')||sessionStorage['token']
    this.$store.commit('tokenName',this.tokensss('token')||sessionStorage['token'])
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    body{
        min-height: 500px;
        position: relative;
    }
    .hie{
        visibility: hidden;
    }
    .hieinline{
        visibility: inherit;
    }
</style>
